<script setup>
	import {reactive, ref, watchEffect ,inject ,toRaw} from 'vue'
	import {useRouter} from 'vue-router'
	import  {userRegisterApi} from '@/api/userApi'
	const  loading = inject('Loading')
	const router = useRouter()
	const  ruleFormRef = ref('')
	const RegisterForm = reactive({
		username: '',
		telephone: '',
		captcha: '',
		password: '',
		tcpChecked: false,
	})
	const pwdStrength = ref(0)
	watchEffect(() => {
		if(RegisterForm.password.length >= 6){
			pwdStrength.value = 0
			// 正则匹配密码
			const patterns = [
				/[a-z]/,   // 小写字母
				/[A-Z]/,   // 大写字母
				/[0-9]/,   // 数字
				/[\W_]/    // 特殊字符
			]
			// 检查每个正则表达式，如果匹配，则增加得分
			patterns.forEach(pattern => {
				if (pattern.test(RegisterForm.password)) {
					pwdStrength.value++
				}
			})
		}else {
			pwdStrength.value = 0
		}
	})
	// 获取验证码
	const captchaStatus = ref(false)
	const codeMsg = ref('获取验证码')
	const getCaptcha = () => {
		captchaStatus.value = true
		loopTimer(Date.now())
	}
	/** 倒计时 */
	function loopTimer(_st) {
		let _time = 60 - Math.ceil((Date.now() - _st) / 1000)
		if (_time > 0) {
			codeMsg.value = `重新获取(${_time}s)`
			setTimeout(function () {
				loopTimer(_st)
			}, 1000)
		} else {
			codeMsg.value = `获取验证码`
			captchaStatus.value = false
		}
	}
	const  rules ={
		username:{
			required: true,
			message: '请输入用户名',
			trigger: 'blur'
		},
		telephone:{
			required: true,
			validator: (rule, value, callback) => {
				if (!value) {
					callback(new Error('请输入手机号'))
				} else if (!/^1[3456789]\d{9}$/.test(value)) {
					callback(new Error('请输入正确的手机号'))
				} else {
					callback()
				}
			},
			trigger: 'blur'
		},
		password:{
			required: true,
			message: '请输入密码',
			min: 6,
			max:16,
			trigger: 'blur'
		},
		captcha:{
			type: 'number',
			required: true,
			message: '请输入验证码',
			trigger: 'blur'
		},
		tcpChecked:{
			type: 'boolean',
			required: true,
			trigger: 'change',
			validator: (rule, value, callback) => {
				if (value) {
					callback()
				} else {
					callback(new Error('请勾选同意协议'))
				}
			},
		}
	}
	// 注册
	const register  = async (formEl)=>{
		console.log(formEl)
		if (!formEl) return
		await formEl.validate(async (valid, fields) => {
			if (valid) {
				const res = await loading(userRegisterApi)((toRaw(RegisterForm)))
				// const  res = await  userRegisterApi((toRaw(RegisterForm)))
				if (res.code === 200)
					await router.push('/login')
			}
		})

	}
</script>
<template>
	<h2 class="f30  mb22">注册</h2>
	<el-form :model="RegisterForm"
			 ref="ruleFormRef"
			 :rules
			 :size="'large'"
			 class="login-form">
		<el-form-item prop="username">
			<el-input v-model="RegisterForm.username" placeholder="请输入用户名"></el-input>
		</el-form-item>
		<el-form-item prop="telephone">
			<el-input v-model="RegisterForm.telephone" placeholder="请输入手机号"></el-input>
		</el-form-item>

		<div class="flex mb22" >
			<el-input  v-model="RegisterForm.captcha" placeholder="请输入验证码"></el-input>
			<el-button type="primary" class="ml20" :loading="captchaStatus" @click="getCaptcha" :disabled="captchaStatus">
				{{ codeMsg }}
			</el-button>
		</div>
		<el-form-item prop="password">
			<el-input v-model="RegisterForm.password"   placeholder="请输入密码" show-password></el-input>
		</el-form-item>
		<div class="flex fJustifyAround mb22">
			<div v-for="i in 4" :key="i" :class="{'hardness':true,
				 'weak': pwdStrength === 1 && i === 1,
				 'fair': pwdStrength === 2 && i <= 2,
				 'good': pwdStrength === 3 && i <= 3,
				 'strong': pwdStrength === 4 && i <= 4 }"></div>
		</div>
		<el-form-item prop="tcpChecked">
			<el-checkbox v-model="RegisterForm.tcpChecked" label="我已阅读并同意《用户协议》"></el-checkbox>
		</el-form-item>
		<el-form-item>
			<el-button type="primary"  style="width: 100%" @click="register(ruleFormRef)">注册</el-button>
		</el-form-item>
		<div>
			<el-link style="float: right" type="primary" @click="router.push('/login')" >去登录</el-link>
		</div>
	</el-form>
</template>

<style scoped lang="scss">
	@import "@/style/color.scss";

	* {
		user-select: none;
	}

	.el-form {
		width: 420px;
	}

	.hardness {
		width: 100px;
		height: 10px;
		background-color: $view;
		border-radius: 5px;
	}

	.weak {
		background-color: red;
	}

	.fair {
		background-color: orange;
	}

	.good {
		background-color: yellow;
	}

	.strong {
		background-color: green;
	}
</style>